<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-CN">
	
<head>
	<title>基于webpack 环境配置 — Vue.js</title>
	<meta charset="utf-8">
	<meta name="description" content="Vue.js - The Progressive JavaScript Framework">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<script src="/js/jquery-3.1.0.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="/js/prettify.js"></script>
	<script type="text/javascript" src="/js/content.js"></script>
	<link rel="stylesheet" href="/css/prettify.css">
	<link rel="icon" href="/images/logo.png" type="image/png">


	<script type="text/javascript" src="/js/vue.js"></script>



	<!-- main page styles -->
	<link rel="stylesheet" href="/css/page.css">
<style type="text/css">
	.content .linenums>ol {
		margin: 0;
		padding-left:35px;
	}
	.hljs-comment,.hljs-quote{color:#8e908c}
	.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#c82829}
	.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5871f}
	.hljs-attribute{color:#eab700}
	.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#718c00}
	.hljs-section,.hljs-title{color:#4271ae}
	.hljs-keyword,.hljs-selector-tag{color:#8959a8}
	.hljs{display:block;overflow-x:auto;background:#fff;color:#4d4d4c;padding:.5em}
	.hljs-emphasis{font-style:italic}
	.hljs-strong{font-weight:700}
</style>
</head>

<body class="docs">


<div id="header">
	<a id="logo" href="https://cn.vuejs.org/">
		<img src="/images/logo.png">
		<span>Vuecli</span>
	</a>
</div>


<div id="main" class="fix-sidebar">
	<div class="sidebar">
		<div class="sidebar-inner">
			<div class="list">
			<ul class="menu-root">
	<li>
		<h3>知识点</h3>
	</li>
	<li id="stylus" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/stylus" class="sidebar-link">stylus</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/stylus#变量">变量</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/stylus#@import引入">@import引入</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/stylus#特殊用法">特殊用法</a>
			</li>
		</ul>
	</li>

	<li id="transfer" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/transfer" class="sidebar-link">框架数据传递 全局函数</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/transfer#func">第三方全局函数</a>
			</li>
		</ul>
	</li>

	<li id="axios" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/axios" class="sidebar-link">axios</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#Features">Features</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#浏览器支持">浏览器支持</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#安装">安装</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#Example">Example</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#API">axios API</a>
			</li>
			<ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#请求方法的别名">请求方法的别名</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#并发">并发</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#创建实例">创建实例</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#实例方法">实例方法</a>
				</li>
			</ul>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#请求配置">请求配置</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#响应结构">响应结构</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#defaults">配置的默认值/defaults</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#拦截器">拦截器</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#错误处理">错误处理</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#取消">取消</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#Semver">Semver</a>
			</li>
		</ul>
	</li>
	
	
	<li>
		<h3>框架布局</h3>
	</li>
	<li id="mulujiegou" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/mulujiegou" class="sidebar-link">目录结构</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#路径配置import">路径配置import</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#总体框架">总体框架</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#文件结构细分">文件结构细分</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#build">build - [webpack配置]</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#config">config - [vue项目配置]</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#node_modules">node_modules - [依赖包]</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#router">router - [路由配置]</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>


	<li id="huanjingpeizhi" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/huanjingpeizhi" class="sidebar-link">基于webpack 环境配置</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#运行服务器">运行服务器</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#运行服务器0">运行服务器 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#cmd其他操作命令">cmd其他操作命令</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#代码初始化">代码初始化</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#viewport">viewport index.html</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#resetcss">reset.css 样式初始化</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#stylus_install">安装 stylus</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#fastclick">fastclick.js 解决点击延时</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#bordercss">border.css 1像素边框</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#iconfont">iconfont</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#安装">安装</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#node">安装node.js LTS版本 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#vuecli">安装vue-cil 全局安装一次 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#webpack">创建 webpack模板的项目 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#cnpm">使用cnmp</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	


	<li>
		<h3>Vue Router</h3>
	</li>
	<li id="vrouter-van" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-van" class="sidebar-link">van: 基于vue-cil的使用</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-van#indexjs" data-scroll="" class="section-link">@/router/index.js</a></li>
		</ul>
	</li>
	<li id="vrouter-start" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-start" class="sidebar-link">安装 与 介绍</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-start#installation" data-scroll="" class="section-link">安装</a></li>
			<li><a href="/Vuecli/vrouter-start#introduce" data-scroll="" class="section-link">介绍</a></li>
		</ul>
	</li>
	<li id="vrouter-basic" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-basic" class="sidebar-link">基础</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-basic#start" class="section-link">起步</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#start-html" class="section-link">HTML</a></li>
				<li><a href="/Vuecli/vrouter-basic#start-javascript" class="section-link">JavaScript</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#dynamic_matching" class="section-link">动态路由匹配</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#dynamic_matching-响应路由参数的变化" class="section-link">响应路由参数的变化</a></li>
				<li><a href="/Vuecli/vrouter-basic#dynamic_matching-高级匹配模式" class="section-link">高级匹配模式</a></li>
				<li><a href="/Vuecli/vrouter-basic#dynamic_matching-匹配优先级" class="section-link">匹配优先级</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#nested-routes" class="section-link">嵌套路由</a></li>
			
			<li><a href="/Vuecli/vrouter-basic#navigation" class="section-link">编程式的导航</a></li>
			
			<li><a href="/Vuecli/vrouter-basic#named-routes" class="section-link">命名路由</a></li>
			
			<li><a href="/Vuecli/vrouter-basic#named_views" class="section-link">命名视图</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#named_views-嵌套命名视图" class="section-link">嵌套命名视图</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#redirect_and_alias" class="section-link">重定向和别名</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#redirect_and_alias-重定向" class="section-link">重定向</a></li>
				<li><a href="/Vuecli/vrouter-basic#redirect_and_alias-别名" class="section-link">别名</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#passing_props" class="section-link">路由组件传参</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#passing_props-布尔模式" class="section-link">布尔模式</a></li>
				<li><a href="/Vuecli/vrouter-basic#passing_props-对象模式" class="section-link">对象模式</a></li>
				<li><a href="/Vuecli/vrouter-basic#passing_props-函数模式" class="section-link">函数模式</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#history_mode" class="section-link">HTML5 History 模式</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#history_mode-后端配置例子" class="section-link">后端配置例子</a></li>
				<li><a href="/Vuecli/vrouter-basic#history_mode-警告" class="section-link">警告</a></li>
			</ul>
		</ul>
	</li>
	<li id="vrouter-advanced" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-advanced" class="sidebar-link">进阶</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-advanced#navigation_guards" class="section-link">导航守卫</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-全局守卫" class="section-link">全局守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-全局解析守卫" class="section-link">全局解析守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-全局后置钩子" class="section-link">全局后置钩子</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-路由独享的守卫" class="section-link">路由独享的守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-组件内的守卫" class="section-link">组件内的守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-完整的导航解析流程" class="section-link">完整的导航解析流程</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#meta" class="section-link">路由元信息</a></li>
		
			<li><a href="/Vuecli/vrouter-advanced#transitions" class="section-link">过渡动效</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#transitions-单个路由的过渡" class="section-link">单个路由的过渡</a></li>
				<li><a href="/Vuecli/vrouter-advanced#transitions-基于路由的动态过渡" class="section-link">基于路由的动态过渡</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#data_fetching" class="section-link">数据获取</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#data_fetching-导航完成后获取数据" class="section-link">导航完成后获取数据</a></li>
				<li><a href="/Vuecli/vrouter-advanced#data_fetching-在导航完成前获取数据" class="section-link">在导航完成前获取数据</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#scroll_behavior" class="section-link">滚动行为</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#scroll_behavior-异步滚动" class="section-link">异步滚动</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#lazy_loading" class="section-link">路由懒加载</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#lazy_loading-把组件按组分块" class="section-link">把组件按组分块</a></li>
			</ul>
		</ul>
	</li>


	<li>
		<h3>Vuex</h3>
	</li>
	<li id="vuex-start" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuex-start" class="sidebar-link">安装 与 介绍</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuex-start#installation" data-scroll="" class="section-link">安装</a></li>
			<li><a href="/Vuecli/vuex-start#introduce" data-scroll="" class="section-link">Vuex 是什么？</a></li>
			<li><a href="/Vuecli/vuex-start#vrouter-basic0" data-scroll="" class="section-link">开始</a></li>
		</ul>
	</li>
	<li id="vuex-guide" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuex-guide" class="sidebar-link">核心概念</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuex-guide#state" data-scroll="" class="section-link">State</a></li>
			<li><a href="/Vuecli/vuex-guide#getters" data-scroll="" class="section-link">Getter</a></li>
			<li><a href="/Vuecli/vuex-guide#mutations" data-scroll="" class="section-link">Mutation</a></li>
			<li><a href="/Vuecli/vuex-guide#actions" data-scroll="" class="section-link">Action</a></li>
			<li><a href="/Vuecli/vuex-guide#modules" data-scroll="" class="section-link">Module</a></li>
		</ul>
	</li>
	<li id="vuex-important" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuex-important" class="sidebar-link">重点知识</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuex-important#structure" data-scroll="" class="section-link">项目结构</a></li>
			<li><a href="/Vuecli/vuex-important#plugins" data-scroll="" class="section-link">插件</a></li>
			<li><a href="/Vuecli/vuex-important#strict" data-scroll="" class="section-link">严格模式</a></li>
			<li><a href="/Vuecli/vuex-important#forms" data-scroll="" class="section-link">表单处理</a></li>
			<li><a href="/Vuecli/vuex-important#testing" data-scroll="" class="section-link">测试</a></li>
			<li><a href="/Vuecli/vuex-important#hot-reload" data-scroll="" class="section-link">热重载</a></li>
		</ul>
	</li>


	<li>
		<h3>Vue-CLI</h3>
	</li>
	<li id="vuecli-start" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuecli-start" class="sidebar-link">安装 与 介绍</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuecli-start#introduce" data-scroll="" class="section-link">介绍</a></li>
			<li><a href="/Vuecli/vuecli-start#installation" data-scroll="" class="section-link">安装</a></li>
		</ul>
	</li>
	<li id="vuecli-basic" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuecli-basic" class="sidebar-link">基础</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuecli-basic#prototyping" data-scroll="" class="section-link">快速原型开发</a></li>
			<li><a href="/Vuecli/vuecli-basic#creating-a-project" data-scroll="" class="section-link">创建一个项目</a></li>
			<li><a href="/Vuecli/vuecli-basic#plugins-and-presets" data-scroll="" class="section-link">插件和 Preset</a></li>
			<li><a href="/Vuecli/vuecli-basic#cli-service" data-scroll="" class="section-link">CLI 服务</a></li>
		</ul>
	</li>
	<li id="vuecli-develop" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuecli-develop" class="sidebar-link">开发</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuecli-develop#browser-compatibility" data-scroll="" class="section-link">浏览器兼容性</a></li>
			<li><a href="/Vuecli/vuecli-develop#html-and-static-assets" data-scroll="" class="section-link">HTML 和静态资源</a></li>
			<li><a href="/Vuecli/vuecli-develop#css" data-scroll="" class="section-link">CSS 相关</a></li>
			<li><a href="/Vuecli/vuecli-develop#webpack" data-scroll="" class="section-link">webpack 相关</a></li>
			<li><a href="/Vuecli/vuecli-develop#mode-and-env" data-scroll="" class="section-link">环境变量和模式</a></li>
			<li><a href="/Vuecli/vuecli-develop#build-targets" data-scroll="" class="section-link">构建目标</a></li>
			<li><a href="/Vuecli/vuecli-develop#deployment" data-scroll="" class="section-link">部署</a></li>
		</ul>
	</li>
	
</ul>

			</div>
		</div>
	</div>

	 
<div class="content guide with-sidebar components-guide">
	
<h1>基于webpack 环境配置</h1>	
<h2 id="运行服务器">
	<a href="#运行服务器" class="headerlink" title="运行服务器" data-scroll="">运行服务器</a>
</h2>

<h3 id="运行服务器0">
	<a href="#运行服务器0" class="headerlink" title="运行服务器0" data-scroll="">运行服务器 cmd</a>
</h3>
<code class="prettyprint linenums">#&nbsp;进入项目目录<br/>&gt;&nbsp;e:<br/>E:\&gt;&nbsp;cd&nbsp;0_codeWork\0_Myjoin<br/>E:\0_codeWork\0_Myjoin&gt;&nbsp;npm&nbsp;run&nbsp;dev<br/>下面自动打包...<br/>Your&nbsp;application&nbsp;is&nbsp;running&nbsp;here:&nbsp;http://localhost:8080
</code>
<br>

<h3 id="cmd其他操作命令">
	<a href="#cmd其他操作命令" class="headerlink" title="cmd其他操作命令" data-scroll="">cmd其他操作命令</a>
</h3>
<code class="prettyprint linenums">ctr+c&nbsp;&nbsp;//&nbsp;终止运行<br/>cls&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;清屏
</code>
<br><br><br>


<h2 id="代码初始化">
	<a href="#代码初始化" class="headerlink" title="代码初始化" data-scroll="">代码初始化</a>
</h2>

<h3 id="viewport">
	<a href="#viewport" class="headerlink" title="viewport" data-scroll="">viewport index.html</a>
</h3>
<code class="prettyprint linenums">//&nbsp;0_Myjoin&nbsp;/&nbsp;index.html<br/>&lt;!DOCTYPE&nbsp;html&gt;<br/>&lt;html&gt;<br/>&nbsp;&nbsp;&lt;head&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;charset=&quot;utf-8&quot;&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&quot;&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;myjoin&lt;/title&gt;<br/>&nbsp;&nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp;&lt;body&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;app&quot;&gt;&lt;/div&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;built&nbsp;files&nbsp;will&nbsp;be&nbsp;auto&nbsp;injected&nbsp;--&gt;<br/>&nbsp;&nbsp;&lt;/body&gt;<br/>&lt;/html&gt;
</code>
<br/>

<h3 id="resetcss">
	<a href="#resetcss" class="headerlink" title="resetcss" data-scroll="">reset.css 样式初始化</a>
</h3>
<code class="prettyprint linenums">//&nbsp;main.js<br/>import&nbsp;'styles/border.css'
</code>
<br/>

<h3 id="stylus_install">
	<a href="#stylus_install" class="headerlink" title="stylus_install" data-scroll="">安装 stylus</a>
</h3>
<code class="prettyprint linenums">#&nbsp;进入项目目录<br/>&gt;&nbsp;e:<br/>E:\&gt;&nbsp;cd&nbsp;0_codeWork\0_Myjoin<br/>E:\0_codeWork\0_Myjoin&gt;&nbsp;npm&nbsp;install&nbsp;stylus&nbsp;--save<br/><br/>E:\0_codeWork\0_Myjoin&gt;&nbsp;npm&nbsp;install&nbsp;stylus-loader&nbsp;--save
</code>
<br>

<h3 id="fastclick">
	<a href="#fastclick" class="headerlink" title="fastclick" data-scroll="">fastclick.js 解决点击延时</a>
</h3>
<div>1. npm安装 fastclick</div>
<code class="prettyprint linenums">#&nbsp;进入项目目录<br/>&gt;&nbsp;e:<br/>E:\&gt;&nbsp;cd&nbsp;0_codeWork\0_Myjoin<br/>E:\0_codeWork\0_Myjoin&gt;&nbsp;npm&nbsp;install&nbsp;fastclick&nbsp;--save
</code>

<div>2. 引入项目</div>
<code class="prettyprint linenums">//&nbsp;main.js<br/>import&nbsp;fastclick&nbsp;from&nbsp;'fastclick'<br/>fastclick.attach(document.body)
</code>
<br/>

<h3 id="bordercss">
	<a href="#bordercss" class="headerlink" title="bordercss" data-scroll="">border.css 1像素边框</a>
</h3>
<code class="prettyprint linenums">//&nbsp;main.js<br/>import&nbsp;'styles/reset.css'
</code>
<br/>

<h3 id="iconfont">
	<a href="#iconfont" class="headerlink" title="iconfont" data-scroll="">iconfont</a>
</h3>
<div>http://www.iconfont.cn =&gt; 图标管理 =&gt; 我的项目 =&gt; 新建项目</div>
<br><br><br>



<h2 id="安装">
	<a href="#安装" class="headerlink" title="安装" data-scroll="">安装</a>
</h2>	

<h3 id="node">
	<a href="#node" class="headerlink" title="node" data-scroll="">安装node.js LTS版本 cmd</a>
</h3>
<code class="prettyprint linenums">&gt;&nbsp;node&nbsp;-v<br/>v10.13.0<br/>&gt;&nbsp;npm&nbsp;-v<br/>6.4.1
</code>
<br>

<h3 id="vuecli">
	<a href="#vuecli" class="headerlink" title="vuecli" data-scroll="">安装vue-cil 全局安装一次 cmd</a>
</h3>
<code class="prettyprint linenums">#&nbsp;全局安装&nbsp;vue-cli<br/>&gt;&nbsp;npm&nbsp;install&nbsp;--global&nbsp;vue-cli
</code>
<br>

<h3 id="webpack">
	<a href="#webpack" class="headerlink" title="webpack" data-scroll="">创建 webpack模板的项目 cmd</a>
</h3>
<code class="prettyprint linenums">#&nbsp;切换到&nbsp;需要安装的文件夹<br/>&gt;&nbsp;e:<br/>E:\&gt;&nbsp;cd&nbsp;0_codeWork<br/>E:\0_codeWork&gt;&nbsp;vue&nbsp;init&nbsp;webpack&nbsp;0_Myjoin&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;0_Myjoin为需要创建的文件夹<br/>?&nbsp;Target&nbsp;directory&nbsp;exists.&nbsp;Continue?&nbsp;(Y/n)&nbsp;Y回车<br/>?&nbsp;Project&nbsp;name&nbsp;(0_Myjoin)&nbsp;myjoin回车&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;项目文件名&nbsp;必须小写<br/>?&nbsp;Project&nbsp;description&nbsp;myjoin&nbsp;taijiao回车&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;项目描述<br/>?&nbsp;Author&nbsp;vanzyi&nbsp;回车&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;作者<br/>&gt;&nbsp;Runtime&nbsp;+&nbsp;Compiler回车&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;编译方式&nbsp;第1种&nbsp;standalone<br/>?Install&nbsp;vue-router?&nbsp;Y&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;安装&nbsp;vue路由<br/>?Use&nbsp;ESLint&nbsp;to&nbsp;lint&nbsp;your&nbsp;code?&nbsp;Y&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;代码&nbsp;ESLint&nbsp;检查规范<br/>?Pick&nbsp;an&nbsp;ESLint&nbsp;preset&nbsp;Standard&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;代码&nbsp;ESLint&nbsp;检查规范<br/>?Set&nbsp;up&nbsp;unit&nbsp;tests&nbsp;n&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;单元化测试<br/>?Setup&nbsp;e2e&nbsp;tests...&nbsp;n&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;端到端测试<br/>?Should&nbsp;we&nbsp;run&nbsp;'npm&nbsp;install'...&nbsp;Yes,&nbsp;use&nbsp;NPM&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;包管理方式<br/>下面自动安装...
</code>
<br><br>

<h3 id="cnpm">
	<a href="#cnpm" class="headerlink" title="cnpm" data-scroll="">使用npm淘宝镜像</a>
</h3>

<b>这是一个完整 <code>npmjs.org</code> 镜像，你可以用此代替官方版本(只读)，同步频率目前为 <strong>10分钟</strong> 一次以保证尽量与官方服务同步。</b>
<ul>
<li>当前 <a href="//registry.npm.taobao.org">registry.npm.taobao.org</a> 是从 <a href="//r.cnpmjs.org">r.cnpmjs.org</a> 进行全量同步的.</li>
<li>当前 <a href="/">npm.taobao.org</a> 运行版本是: <a href="http://cnpmjs.org">cnpmjs.org</a>@<span id="app-version"></span></li>
<li>本系统运行在 <a href="https://nodejs.org">Node.js</a>@<span id="node-version"></span> 上.</li>
<li>开源镜像: <a href="http://npm.taobao.org/mirrors">http://npm.taobao.org/mirrors</a></li>
<li>Node.js 镜像: <a href="http://npm.taobao.org/mirrors/node">http://npm.taobao.org/mirrors/node</a></li>
<li>alinode 镜像: <a href="http://npm.taobao.org/mirrors/alinode">http://npm.taobao.org/mirrors/alinode</a></li>
<li>phantomjs 镜像: <a href="http://npm.taobao.org/mirrors/phantomjs">http://npm.taobao.org/mirrors/phantomjs</a></li>
<li>ChromeDriver 镜像: <a href="http://npm.taobao.org/mirrors/chromedriver">http://npm.taobao.org/mirrors/chromedriver</a></li>
<li>OperaDriver 镜像: <a href="http://npm.taobao.org/mirrors/operadriver">http://npm.taobao.org/mirrors/operadriver</a></li>
<li>Selenium 镜像: <a href="http://npm.taobao.org/mirrors/selenium">http://npm.taobao.org/mirrors/selenium</a></li>
<li>Node.js 文档镜像: <a href="http://npm.taobao.org/mirrors/node/latest/docs/api/index.html">http://npm.taobao.org/mirrors/node/latest/docs/api/index.html</a></li>
<li>NPM 镜像: <a href="https://npm.taobao.org/mirrors/npm/">https://npm.taobao.org/mirrors/npm/</a></li>
<li>electron 镜像: <a href="https://npm.taobao.org/mirrors/electron/">https://npm.taobao.org/mirrors/electron/</a></li>
<li>node-inspector 镜像: <a href="https://npm.taobao.org/mirrors/node-inspector/">https://npm.taobao.org/mirrors/node-inspector/</a></li>
</ul>
<div class="ant-table">
<table class="downloads">
  <tbody>
    <tr>
      <td class="count" id="total-packages"></td><td>个模块</td>
      <td class="count" id="total-versions"></td><td>个模块版本</td>
      <td class="count" id="total-deletes"></td><td>次删除</td>
    </tr>
    <tr>
      <td class="count"></td><td> 次本日下载</td>
      <td class="count"></td><td> 次本周下载</td>
      <td class="count"></td><td> 次本月下载</td>
    </tr>
    <tr>
      <td class="count"></td><td> 次昨日下载</td>
      <td class="count"></td><td> 次上周下载</td>
      <td class="count"></td><td> 次上月下载</td>
    </tr>
  </tbody>
</table>
</div>

<h4>Version Badge</h4>
<p>Default style is <code>flat-square</code>.</p>
<p>Badge URL: <code>https://npm.taobao.org/badge/v/cnpmjs.org.svg</code> <img src="https://npm.taobao.org/badge/v/cnpmjs.org.svg" alt="cnpmjs.org-badge"></p>
<ul>
<li><code>&lt;0.1.0 &amp; &gt;=0.0.0</code>: <img src="https://img.shields.io/badge/cnpm-0.0.1-red.svg?style=flat-square" alt="red-badge"></li>
<li><code>&lt;1.0.0 &amp; &gt;=0.1.0</code>: <img src="https://img.shields.io/badge/cnpm-0.1.0-green.svg?style=flat-square" alt="red-badge"></li>
<li><code>&gt;=1.0.0</code>: <img src="https://img.shields.io/badge/cnpm-1.0.0-blue.svg?style=flat-square" alt="red-badge"></li>
</ul>

<h4>使用说明</h4>
<p>你可以使用我们定制的 <a href="https://github.com/cnpm/cnpm">cnpm</a> (gzip 压缩支持) 命令行工具代替默认的 <code>npm</code>:</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="pln">$&nbsp;npm&nbsp;install&nbsp;</span><span class="pun">-</span><span class="pln">g&nbsp;cnpm&nbsp;</span><span class="pun">--</span><span class="pln">registry</span><span class="pun">=</span><span class="pln">https</span><span class="pun">:</span><span class="com">//registry.npm.taobao.org</span></li></ol></code>

<p>或者你直接通过添加 <code>npm</code> 参数 <code>alias</code> 一个新命令:</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">alias</span><span class="pln">&nbsp;cnpm</span><span class="pun">=</span><span class="str">"npm&nbsp;--registry=https://registry.npm.taobao.org&nbsp;\</span></li><li class="L1"><span class="str">--cache=$HOME/.npm/.cache/cnpm&nbsp;\</span></li><li class="L2"><span class="str">--disturl=https://npm.taobao.org/dist&nbsp;\</span></li><li class="L3"><span class="str">--userconfig=$HOME/.cnpmrc"</span></li><li class="L4"><span class="pln">&nbsp;</span></li><li class="L5"><span class="com">#&nbsp;Or&nbsp;alias&nbsp;it&nbsp;in&nbsp;.bashrc&nbsp;or&nbsp;.zshrc</span></li><li class="L6"><span class="pln">$&nbsp;echo&nbsp;</span><span class="str">'\n#alias&nbsp;for&nbsp;cnpm\nalias&nbsp;cnpm="npm&nbsp;--registry=https://registry.npm.taobao.org&nbsp;\</span></li><li class="L7"><span class="str">&nbsp;&nbsp;--cache=$HOME/.npm/.cache/cnpm&nbsp;\</span></li><li class="L8"><span class="str">&nbsp;&nbsp;--disturl=https://npm.taobao.org/dist&nbsp;\</span></li><li class="L9"><span class="str">&nbsp;&nbsp;--userconfig=$HOME/.cnpmrc"'</span><span class="pln">&nbsp;</span><span class="pun">&gt;&gt;</span><span class="pln">&nbsp;</span><span class="pun">~</span><span class="str">/.zshrc&nbsp;&amp;&amp;&nbsp;source&nbsp;~/</span><span class="pun">.</span><span class="pln">zshrc</span></li></ol></code>

<h6>安装模块</h6>
<p>从 <a href="//registry.npm.taobao.org">registry.npm.taobao.org</a> 安装所有模块.当安装的时候发现安装的模块还没有同步过来, 淘宝 NPM 会自动在后台进行同步,并且会让你从官方 NPM <a href="//registry.npmjs.org">registry.npmjs.org</a> 进行安装.下次你再安装这个模块的时候, 就会直接从 淘宝 NPM 安装了.</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="pln">$&nbsp;cnpm&nbsp;install&nbsp;</span><span class="pun">[</span><span class="pln">name</span><span class="pun">]</span></li></ol></code>

<h6>同步模块</h6>
<p>直接通过 <code>sync</code> 命令马上同步一个模块, 只有 <code>cnpm</code> 命令行才有此功能:</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="pln">$&nbsp;cnpm&nbsp;sync&nbsp;connect</span></li></ol></code>

<p>当然, 你可以直接通过 web 方式来同步: <a href="/sync/connect">/sync/connect</a></p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="pln">$&nbsp;open&nbsp;https</span><span class="pun">:</span><span class="com">//npm.taobao.org/sync/connect</span></li></ol></code>

<h6>其他命令</h6>
<p>支持 <code>npm</code> 除了 <code>publish</code> 之外的所有命令, 如:</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="pln">$&nbsp;cnpm&nbsp;info&nbsp;connect</span></li></ol></code>


</div>	<!-- content -->

		<!-- important -->

<!-- var end -->
</div>	<!-- #main -->

<script>
	
var thisAction = '<?php echo ($thisAction); ?>';

if (thisAction == 'all') {
	// sidebar全部显示
	var $link = $('.content .headerlink');
	var $slink = $('.section-link');
	
}else {
	// 仅展开 当前actionName
	$('.menu-sub').hide();
	$('#'+thisAction+'>a').addClass('current'); 
	$('#'+thisAction+'>i').addClass('sidebar-tap').html('－');
	$('#'+thisAction+' .menu-sub').show();


	$('.sidebar-menu>i').click(function(){
		if($(this).hasClass('sidebar-tap')) {
			$(this).html('＋').toggleClass('sidebar-tap');
			$(this).siblings('.menu-sub').hide();
		}else {
			$('.sidebar-menu>i').html('＋').removeClass('sidebar-tap');
			$('.sidebar-menu .menu-sub').hide();

			$(this).html('－').toggleClass('sidebar-tap');
			$(this).siblings('.menu-sub').show();
		}
	});


	let href = window.location.href;
	let start = href.indexOf('#');
	let href2 = '';
	if(start > 0) {
		href2 = href.slice(start+1);
		$('#'+thisAction+' .section-link[href="#'+href2+'"]').addClass('active');
	}else {
		$('#'+thisAction+' .menu-sub .section-link:first').addClass('active');
	}
 
	var $link = $('.content .headerlink');
	var $slink = $('#'+thisAction+' .menu-sub .section-link');
	
	$('#'+thisAction+' .section-link').click(function(){
		$slink.removeClass('active');
		$(this).addClass('active');
	});
}



// 页面滚动 .sidebar提示 start
let scrollArr = [];
$.each( $link, function() {
	let offset = $(this).offset();
	let thisId = $(this).attr('id');
	scrollArr.push(offset.top);
});


$(window).on('scroll', function(){
	let scrollTop = $(document).scrollTop();
	let nap = 110;
	let slength = scrollArr.length;
	let i=0;
	if(scrollTop < (scrollArr[0]-nap) ) {
	}else if(scrollTop >= scrollArr[slength-1]-nap) {
		i = slength-1;
	}else {
		for(i=0; i<scrollArr.length; i++) {
			if(scrollTop>=scrollArr[i]-nap && scrollTop<scrollArr[i+1]-nap) {
				break;
			}
		}
	}

	if($slink.eq(i).length > 0){
		$slink.removeClass('active');
		$slink.eq(i).addClass('active');
	}
});


</script>

    
  </body>
</html>